<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script src="http://localhost:8082/test.js"></script>
</head>
<body>
<H1>1.iframe 可以直接支持跨域</H1>
<iframe src="http://localhost:8082" style="width: 300px"></iframe>
<H1>2.普通请求会直接报跨域错误,需要另一个服务响应头中新增Access-Control-Allow-Origin属性</H1>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>
<script type="text/javascript">
    $(document).ready(function(){
        //注册监听事件
        window.addEventListener("message", receiveMessage, false);
        function receiveMessage(event){
           console.log(event);
        }

        $("#b01").click(function(){
            htmlobj=$.ajax({url:"http://localhost:8082/index",async:false});
            $("#myDiv").html(htmlobj.responseText);
        });

        $("#b02").click(function(){
            var retObj=$.ajax({url:'/api/name'});
            console.log(retObj);
            $("#myDiv3").html(retObj.responseText);
        })
    });
</script>
<H1>3.JSONP方式,采用script标签，需要先定义方法，方法后面写跨域请求</H1>
<div id="myDiv2"><h2>Let AJAX change this text</h2></div>


<script type="text/javascript">
    function change(content){
        $("#myDiv2").html(content);
    }
</script>
<script src="http://localhost:8082/jsonp"></script>
<H1>4. 采用后端对后端，绕过浏览器的同源策略</H1>
<button id="b02" >后端对后端</button>
<div id="myDiv3" style="width: 100px">dd</div>
<H1>5. 请求另一个服务的js</H1>
<button onclick="hi()">请求另一个服务的js</button>
</body>
</html>